<template>
  <page-loading :show="showPage" mode="if">
    <view class="page" v-if="res">
      <view class="info" v-if="cardId === 37 && purchase === 99">
        <!-- 图片标题 -->
        <view class="flex flex-jc-sb flex-ai-c list-1">
          <view class="flex">
            <view>
              <view
                class="img-box"
                style="position: relative"
                v-if="res.card_Type === 4"
              >
                <image
                  style="position: absolute"
                  class="img"
                  :src="res.pic_URL"
                  v-if="res.pic_URL"
                >
                </image>
                <view class="flex flex-dir-c flex-ai-c flex-jc-c img-text">
                  <view class="sale-price"
                    ><text style="font-size: 26rpx">{{ res.sale_Price }}</text
                    ><text>元</text></view
                  >
                  <!-- <view class="free-cost" v-if="res.free_Cost">(送{{res.free_Cost}}元)</view> -->
                </view>
              </view>
              <view class="img-box" style="position: relative" v-else>
                <image
                  style="position: absolute"
                  class="img"
                  :src="res.pic_URL"
                  v-if="res.pic_URL"
                >
                </image>
                <view
                  class="flex flex-dir-c flex-ai-fs flex-jc-c img-text"
                  style="padding-left: 10rpx"
                >
                  <view class="name" style="color: #2f2f2f; font-size: 26rpx">
                    {{ res.coupon_Name | cutString(14) }}
                  </view>
                  <view style="color: #fff; width: 100%; font-size: 20rpx"
                    >￥<text
                      style="
                        font-size: 24rpx;
                        font-weight: bold;
                        margin-right: 10rpx;
                      "
                      >{{ res.sale_Price }}</text
                    >￥<text style="text-decoration: line-through">{{
                      res.normal_Price
                    }}</text></view
                  >
                </view>
              </view>
              <!-- <image :src="res.pic_URL" v-if="res.pic_URL"></image> -->
            </view>
            <view class="list-1-title">{{ res.coupon_Name }}</view>
          </view>
        </view>
        <view class="orderInfo lineHight" style="font-size: 24rpx">
          <view class="flex flex-jc-sb">
            <view style="color: #999999">洗车</view>
            <view class="flex flex-jc-sb" style="width: 160rpx">
              <view style="color: #999999">仅需</view>
              <view style="font-weight: bold">￥20.00</view>
            </view>
          </view>
          <view class="flex flex-jc-sb">
            <view style="color: #999999">自助洗车 <text>x1</text></view>
            <view class="flex flex-jc-sb" style="width: 160rpx">
              <view style="color: #999999">仅需</view>
              <view style="font-weight: bold">￥0.00</view>
            </view>
          </view>
        </view>

        <!-- 分割线 -->
        <view style="background-color: #fff">
          <view style="margin: 0 24rpx">
            <u-line color="#eeeeee" />
          </view>
        </view>
        <view class="orderInfo lineHight">
          <view class="flex flex-ai-c flex-jc-sb">
            <view class="orderInfo-text">支付方式</view>
            <view class="orderInfo-time">专享赠送</view>
          </view>
          <view class="flex flex-ai-c flex-jc-sb">
            <view class="orderInfo-text">领取时间</view>
            <view class="orderInfo-time">{{
              res.trade_Time | formatDate
            }}</view>
          </view>
          <view class="flex flex-ai-c flex-jc-sb">
            <view class="orderInfo-text">过期时间</view>
            <view
              class="orderInfo-time"
              v-if="res.deadline !== '0001-01-01T00:00:00'"
            >
              <text style="margin-right: 32rpx">剩余{{ res.formatText }}</text>
              <text>{{ res.deadline | formatDate }}</text>
            </view>
            <view class="orderInfo-time" v-else>
              <text style="margin-right: 32rpx">剩余{{ res.formatText }}</text>
              <text>无期限</text>
            </view>
          </view>
        </view>

        <view class="details">
          <view v-for="(item, i) in info" :key="i">
            <view>
              <view class="yuan"></view>
              {{ item.name }}
            </view>
          </view>
        </view>
        <view
          class="flex flex-jc-c flex-ai-c flex-wrap-w"
          style="padding: 32rpx 32rpx 0 32rpx"
        >
          <image
            @click="previewImage"
            src="https://files.yzsheng.com/client/selfwash/details/map.jpg"
            style="width: 686rpx; height: 424rpx; border-radius: 10rpx"
            mode="aspectFill"
          ></image>
          <view style="padding-top: 20rpx; font-size: 24rpx; color: #666666"
            >地址说明：环球中心W5区B2；W区5号入口进B2 — 第一个T字口右转 —
            到达7迈车洗车站。</view
          >
        </view>
        <view
          v-if="res.carUseRecord && res.carUseRecord.length === 0"
          style="padding-bottom: 168rpx"
        ></view>
        <!-- 使用记录 -->
        <view
          v-if="res.carUseRecord && res.carUseRecord.length > 0"
          style="padding-bottom: 168rpx"
        >
          <view style="margin: 32rpx 0 16rpx 0; padding: 0 24rpx"
            >使用记录</view
          >
          <view
            v-for="(item, index) in res.carUseRecord"
            :key="index"
            class="orderInfo lineHight"
            style="margin-bottom: 16rpx"
          >
            <view class="flex flex-ai-c">
              <view class="orderInfo-text">使用时间</view>
              <view class="orderInfo-jilu">{{
                item.use_time | formatDate
              }}</view>
            </view>
            <view class="flex flex-ai-c">
              <view class="orderInfo-text">使用洗车点</view>
              <view class="orderInfo-jilu">{{ item.station_Name }}</view>
            </view>
            <view class="flex flex-ai-c">
              <view class="orderInfo-text">洗车用时</view>
              <view class="orderInfo-jilu"
                >{{ item.used_time }}分钟<text v-if="res.card_Type === 1"
                  >（今天还剩{{ timeRemaining }}分钟可用）</text
                ></view
              >
            </view>
          </view>
        </view>

        <!-- 去洗车 -->
        <view class="footer">
          <view class="flex flex-jc-c">
            <view class="btn flex flex-jc-c flex-ai-c" @click="saoWash"
              >扫码洗车</view
            >
          </view>
        </view>
      </view>

      <view class="info" v-else>
        <!-- 图片标题 -->
        <view class="flex flex-jc-sb flex-ai-c list-1">
          <view class="flex">
            <view>
              <view
                class="img-box"
                style="position: relative"
                v-if="res.card_Type === 4"
              >
                <image
                  style="position: absolute"
                  class="img"
                  :src="res.pic_URL"
                  v-if="res.pic_URL"
                >
                </image>
                <view class="flex flex-dir-c flex-ai-c flex-jc-c img-text">
                  <view class="sale-price"
                    ><text style="font-size: 26rpx">{{ res.sale_Price }}</text
                    ><text>元</text></view
                  >
                  <!-- <view class="free-cost" v-if="res.free_Cost">(送{{res.free_Cost}}元)</view> -->
                </view>
              </view>
              <view class="img-box" style="position: relative" v-else>
                <image
                  style="position: absolute"
                  class="img"
                  :src="res.pic_URL"
                  v-if="res.pic_URL"
                >
                </image>
                <view
                  class="flex flex-dir-c flex-ai-fs flex-jc-c img-text"
                  style="padding-left: 10rpx"
                >
                  <view class="name" style="color: #2f2f2f; font-size: 26rpx">
                    {{ res.coupon_Name | cutString(14) }}
                  </view>
                  <view style="color: #fff; width: 100%; font-size: 20rpx"
                    >￥<text
                      style="
                        font-size: 24rpx;
                        font-weight: bold;
                        margin-right: 10rpx;
                      "
                      >{{ res.sale_Price }}</text
                    >￥<text style="text-decoration: line-through">{{
                      res.normal_Price
                    }}</text></view
                  >
                </view>
              </view>
              <!-- <image :src="res.pic_URL" v-if="res.pic_URL"></image> -->
            </view>
            <view class="list-1-title">{{ res.coupon_Name }}</view>
          </view>
          <view class="flex flex-dir-c flex-ai-fe">
            <view>×1</view>
            <view class="price"
              ><text>￥</text>{{ res.sale_Price | formatAmount }}</view
            >
          </view>
        </view>

        <!-- 订单信息 -->
        <view class="orderInfo lineHight">
          <view class="flex flex-ai-c flex-jc-sb">
            <view class="orderInfo-text">订单金额</view>
            <view class="orderInfo-price"
              ><text>￥</text>{{ res.sale_Price | formatAmount }}</view
            >
          </view>
          <view class="flex flex-ai-c flex-jc-sb">
            <view class="orderInfo-text">实际付款</view>
            <view class="orderInfo-price"
              ><text>￥</text>{{ res.actually_Money | formatAmount }}</view
            >
          </view>
          <view class="flex flex-ai-c flex-jc-sb">
            <view class="orderInfo-text">已优惠</view>
            <view class="orderInfo-price"
              ><text>￥</text>{{ res.discount | formatAmount }}</view
            >
          </view>
        </view>
        <!-- 分割线 -->
        <view style="background-color: #fff">
          <view style="margin: 0 24rpx">
            <u-line color="#eeeeee" />
          </view>
        </view>
        <view class="orderInfo lineHight">
          <view class="flex flex-ai-c flex-jc-sb">
            <view class="orderInfo-text">订单编号</view>
            <view class="orderInfo-time">{{ res.order_No }}</view>
          </view>
          <view class="flex flex-ai-c flex-jc-sb">
            <view class="orderInfo-text">支付方式</view>
            <view class="orderInfo-time">{{ res.pay_Platform_Name }}</view>
          </view>
          <view class="flex flex-ai-c flex-jc-sb">
            <view class="orderInfo-text">下单时间</view>
            <view class="orderInfo-time">{{
              res.trade_Time | formatDate
            }}</view>
          </view>
          <view class="flex flex-ai-c flex-jc-sb">
            <view class="orderInfo-text">过期时间</view>
            <view
              class="orderInfo-time"
              v-if="res.deadline !== '0001-01-01T00:00:00'"
            >
              <text style="margin-right: 32rpx">剩余{{ res.formatText }}</text>
              <text>{{ res.deadline | formatDate }}</text>
            </view>
            <view class="orderInfo-time" v-else>
              <text style="margin-right: 32rpx">剩余{{ res.formatText }}</text>
              <text>无期限</text>
            </view>
          </view>
        </view>
        <!-- 使用记录 -->
        <view
          v-if="res.carUseRecord && res.carUseRecord.length > 0"
          style="padding-bottom: 168rpx"
        >
          <view style="margin: 32rpx 0 16rpx 0; padding: 0 24rpx"
            >使用记录</view
          >
          <view
            v-for="(item, index) in res.carUseRecord"
            :key="index"
            class="orderInfo lineHight"
            style="margin-bottom: 16rpx"
          >
            <view class="flex flex-ai-c">
              <view class="orderInfo-text">使用时间</view>
              <view class="orderInfo-jilu">{{
                item.use_time | formatDate
              }}</view>
            </view>
            <view class="flex flex-ai-c">
              <view class="orderInfo-text">使用洗车点</view>
              <view class="orderInfo-jilu">{{ item.station_Name }}</view>
            </view>
            <view class="flex flex-ai-c">
              <view class="orderInfo-text">洗车用时</view>
              <view class="orderInfo-jilu"
                >{{ item.used_time }}分钟<text v-if="res.card_Type === 1"
                  >（今天还剩{{ timeRemaining }}分钟可用）</text
                ></view
              >
            </view>
            <view class="flex flex-ai-c" v-if="item.card_Type === 4">
              <view class="orderInfo-text">洗车计费</view>
              <view class="orderInfo-jilu">{{ item.amount }}元</view>
            </view>
          </view>
        </view>

        <!-- 去洗车 -->
        <view class="footer">
          <view class="flex flex-jc-c">
            <view class="btn flex flex-jc-c flex-ai-c" @click="onGoWash"
              >去洗车</view
            >
          </view>
        </view>
      </view>

      <u-popup v-model="isShow" mode="center" border-radius="20">
        <view style="width: 600rpx; text-align: center">
          <view style="padding-top: 54rpx; font-weight: bold; font-size: 34rpx"
            >温馨提示</view
          >
          <view style="font-size: 28rpx; padding: 30rpx 0">
            <view>
              <view>该券仅限于环球中心洗车站使用，洗</view>
              <view>车站地址：环球中心W5区B2;</view>
            </view>
            <view style="font-weight: bold">
              <view>从W区5号入口进B2 — 第一个T字口右</view>
              <view>转 — 到达7迈车西车站</view>
            </view>
          </view>
          <view>
            <image
              src="https://files.yzsheng.com/client/selfwash/details/map.jpg"
              style="width: 480rpx; height: 290rpx; border-radius: 10rpx"
              mode="aspectFill"
							@click="previewImage"
            ></image>
          </view>
          <view style="line-height: 60rpx; color: #333333">如需帮助请咨询</view>
          <view style="color: #0076ff; margin-bottom: 30rpx" @click="phone">{{
            serviceNumber.number | filterTel
          }}</view>
          <view
            style="
              color: #0076ff;
              line-height: 80rpx;
              border-top: 2rpx solid #eeeeee;
            "
            @click="onScan"
            >知道了
          </view>
        </view>
      </u-popup>
    </view>
  </page-loading>
</template>

<script>
const dayjs = require("@/utils/dayjs.js");
import { getUrlParam } from "@/utils/common-api.js";
export default {
  data() {
    return {
      isShow: false,
      showPage: false,
      res: null,
      cardId: 0,
      purchase: 0,
      info: [
        {
          name: "该券仅限于环球中心W5-B2洗车站使用；",
        },
        {
          name: "该券权益为一次性使用；",
        },
        {
          name: "该券洗车为使用自助洗车机设备清洗，人工擦洗内饰、外观等需额外支付20元（当场支付给工作人员）",
        },
        {
          name: "自动洗车无额外支付，打开小程序、APP扫码启动设备洗车；",
        },
      ],
    };
  },
  onLoad(options) {
    this.getDetails(options.id);
    this.cardId = Number(options.cardId);
    this.purchase = Number(options.purchase);
    // console.log(this.cardId, this.purchase)
  },
  onShow() {
    this.isShow = false;
  },
  computed: {
    // 剩余时间
    timeRemaining() {
      let num = 30 - Number(this.res.used_time);
      return num > 0 ? num : 0;
    },

    serviceNumber() {
      return this.$store.state.serviceNumber;
    },
  },
  filters: {
    filterTel(tel) {
      let reg = /^(\d{3})\d*(\d{4})$/;
      return tel.replace(reg, "$1****$2");
    },
    formatAmount(data) {
      return parseFloat(data).toFixed(2);
    },
    formatDate(data) {
      return dayjs(data).format("YYYY-MM-DD HH:mm:ss");
    },
    formatDeadline(data) {
      return dayjs(data).diff(dayjs(), "day");
    },
    cutString(str, len) {
      if (str.length * 2 <= len) {
        return str;
      }
      let strlen = 0;
      let s = "";
      for (let i = 0; i < str.length; i++) {
        s = s + str.charAt(i);
        if (str.charCodeAt(i) > 128) {
          strlen = strlen + 2;
          if (strlen >= len) {
            return s.substring(0, s.length - 1) + "...";
          }
        } else {
          strlen = strlen + 1;
          if (strlen >= len) {
            return s.substring(0, s.length - 2) + "...";
          }
        }
      }
      return s;
    },
  },
  methods: {
    saoWash() {
      if (this.res.left_Times <= 0) {
        uni.showToast({
          title: "该优惠券已使用",
          icon: "none",
        });
      } else {
        this.isShow = true;
      }
    },
    phone() {
      uni.makePhoneCall({
        phoneNumber: this.serviceNumber.number,
      });
    },
    previewImage() {
      uni.previewImage({
        urls: ['https://files.yzsheng.com/client/selfwash/details/map.jpg','https://files.yzsheng.com/client/selfwash/details/map2.jpg','https://files.yzsheng.com/client/selfwash/details/map3.jpg','https://files.yzsheng.com/client/selfwash/details/map4.jpg','https://files.yzsheng.com/client/selfwash/details/map5.jpg'],
        longPressActions: {
          itemList: ["保存图片"],
          success: function (data) {
            uni.saveImageToPhotosAlbum({
              filePath: [
                'https://files.yzsheng.com/client/selfwash/details/map.jpg','https://files.yzsheng.com/client/selfwash/details/map2.jpg','https://files.yzsheng.com/client/selfwash/details/map3.jpg','https://files.yzsheng.com/client/selfwash/details/map4.jpg','https://files.yzsheng.com/client/selfwash/details/map5.jpg',
              ],
              success: function () {
                uni.showToast({
                  title: "图片已保存到本地",
                  icon: "none",
                });
              },
            });
          },
          fail: function (err) {
            console.log(err.errMsg);
          },
        },
      });
    },
    async getDetails(id) {
      try {
        let res = await this.$api.user.GetMySelfWashCardDetail({
          orderid: id,
        });
        if (res.code === 200) {
          let data = res.data;
          let total = 0;
          if (data.carUseRecord.length > 0) {
            data.carUseRecord.map((item) => {
              if (item.total_Time > 0) {
                if (
                  dayjs(item.use_time).format("YYYY-MM-DD") ===
                  dayjs().format("YYYY-MM-DD")
                ) {
                  total += item.total_Time;
                }
              }
              if (item.total_Time > 0 && item.total_Time <= 60) {
                item.used_time = 1;
              } else {
                item.used_time =
                  item.total_Time > 0 ? Math.floor(item.total_Time / 60) : 0;
              }
            });
          }

          data.used_time = Math.floor(total / 60) || 0;
          console.log(data.used_time);
          if (data.card_Type === 1) {
            let day = dayjs(data.deadline).diff(dayjs(), "day") + 1;
            data.formatText = `${day <= 0 ? 0 : day}天`;
          } else if (data.card_Type === 2) {
            data.formatText = `${data.left_Times}次`;
          } else if (data.card_Type === 3) {
            data.left_Seconds = Math.floor(data.left_Seconds / 60);
            data.formatText = `${data.left_Seconds}分钟`;
          } else if (data.card_Type === 4) {
            data.formatText = `${
              data.card_Left_Cost <= 0 ? 0 : data.card_Left_Cost
            }元`;
          }
          this.res = data;
          this.showPage = true;
        }
      } catch (e) {}
    },
    onGoWash() {
      uni.navigateTo({
        url: "/pages_commodity/selfWash/map",
      });
    },
    onScan() {
      // #ifdef H5
      let res = {
        result:
          "https://lineapi.yzsheng.com/pages_commodity?id=wc2400197&type=existingOrder",
      };
      let urlParam = getUrlParam(res.result);
      if (urlParam.type === "existingOrder") {
        this.$store.commit("purchaseChannel", true);
        uni.navigateTo({
          url: `/pages_commodity/selfWash/existingOrder?id=${urlParam.id}`,
        });
      } else {
        uni.showToast({
          icon: "none",
          title: "二维码有误",
        });
      }
      return false;
      // #endif
      if (uni.getStorageSync("token")) {
        uni.scanCode({
          success: (res) => {
            this.scanSuccess(res);
          },
        });
      } else {
        uni.navigateTo({
          url: "/pages_logins/login/login?mode=selfwash",
        });
      }
    },
    async scanSuccess(res) {
      try {
        let urlParam = getUrlParam(res.result);
        console.log(res, urlParam, "sa");
        if (urlParam.type === "existingOrder") {
          this.$store.commit("purchaseChannel", true);
          uni.navigateTo({
            url: `/pages_commodity/selfWash/existingOrder?id=${urlParam.id}`,
          });
        } else {
          uni.showToast({
            icon: "none",
            title: "二维码有误",
          });
        }
      } catch (e) {
        //TODO handle the exception
      }
    },
  },
};
</script>

<style lang="scss">
.details {
  padding: 24rpx;
  font-size: 24rpx;
  line-height: 50rpx;
  background-color: #fff;
  color: #666666;
}

.yuan {
  margin-right: 20rpx;
  width: 16rpx;
  height: 16rpx;
  background: #999999;
  border-radius: 50%;
  display: inline-block;
}

.sale-price {
  font-weight: bold;
  color: #685712;
}

.name {
  font-size: 26px;
  font-weight: bold;
  color: #2f2f2f;
  text-shadow: 3rpx 2rpx 4rpx rgba(47, 47, 47, 0.5);
}

.img-text {
  position: absolute;
  z-index: 1;
  line-height: 40rpx;
  width: 100%;
  height: 100%;
  top: 15rpx;
}

.img-text-2 {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding-left: 10rpx;
  top: 0rpx;
  line-height: 35rpx;
  margin-top: 5rpx;
}

page {
  background-color: rgb(241, 241, 241);
}

.lineHight {
  line-height: 50rpx;
}

.page {
  min-height: 100vh;
}

.info {
  padding-top: 16rpx;

  .list-1 {
    padding: 24rpx 24rpx 0 24rpx;
    background-color: #fff;

    .price {
      font-size: 36rpx;
      color: #ff4b44;
      font-weight: bold;

      text {
        font-size: 24rpx;
      }
    }

    .img-box {
      width: 210rpx;
      height: 140rpx;
      background-color: #b8b8b8;
      border-radius: 10rpx;
      overflow: hidden;

      .img {
        width: 100%;
        height: 100%;
      }
    }

    /* .img {
				width: 210rpx;
				height: 140rpx;
				background-color: #FEDD58;
				border-radius: 10rpx;
        overflow: hidden;
        image{
          width: 100%;
          height: 100%;
        }
			} */

    // 标题
    &-title {
      font-size: 28rpx;
      font-weight: 500;
      margin-left: 23rpx;
    }
  }

  //订单信息
  .orderInfo {
    padding: 24rpx;
    background-color: #fff;

    .orderInfo-text {
      color: #999999;
      font-size: 24rpx;
      width: 22%;
      overflow: hidden;
    }

    .orderInfo-price {
      color: #333333;
      font-size: 28rpx;
      font-weight: bold;

      text {
        font-size: 24rpx;
      }
    }

    .orderInfo-time {
      font-size: 24rpx;
      color: #333333;
    }

    .orderInfo-jilu {
      font-size: 24rpx;
      color: #333333;
      width: 70%;
    }
  }

  .footer {
    width: 100%;
    position: fixed;
    bottom: 30px;

    .btn {
      width: 702rpx;
      height: 88rpx;
      background: linear-gradient(0deg, #fbd220, #ffe23e);
      border-radius: 44rpx;
    }
  }
}
</style>
